<template>
      <div class="ac-record">
           <div class="container">
                <!-- 3个背景球-->
                <div class="ball1"></div><div class="ball2"></div><div class="ball3"></div>
                  <!-- 3个背景球-->
                  <div class="inner">
                    <h3 class="banner-title">{{Lang['records']}}</h3>
                    <img class="close" src="@/svg/closebig.svg" width=20 height=20   @click="$router.push('/activity/subscription')" />
                    <div class="list">
                        <ul>
                            <li>
                                <dl>
                                    <dd>{{Lang['time']}}</dd>
                                    <dd>{{Lang['round']}}</dd>
                                    <dd>{{Lang['quantity']}}({{Lang['coin type']}})</dd>
                                    <dd>{{Lang['IT quantity']}}</dd>
                                    <dd>{{Lang['current']}}</dd>
                                </dl>
                            </li>
                            <li v-for="(item,index) in records" :key="index" v-if="records.length">
                                <dl>
                                    <dd>{{item.time}}</dd>
                                    <dd>{{item.rounds}}</dd>
                                    <dd>{{item.quantity}}</dd>
                                    <dd>{{item.ITquantity}}</dd>
                                    <dd>{{item.status}}</dd>
                                </dl>
                            </li>
                        </ul>
                        <div class="pagination"  v-if="records.length">
                            <span>{{Lang['page num']}}</span> <router-link to="#"><img src="@/svg/pageleft.svg" /></router-link> 
                            <em>10</em>
                            <router-link to="#"><img src="@/svg/pageright.svg" /></router-link>
                        </div>
                        <div class="no-record" v-if="records.length===0">
                                <em>{{Lang['no record']}}</em>
                                <router-link to="#">
                                    {{Lang['buy now']}}
                                </router-link>
                        </div>
                    </div>
                 </div>
           </div>
      </div>
</template>
<script>

export default {
    props: {
		lang: {
			type: Object,
		},
	},
    data(){
        return{
            Lang:{},
            records1:[
                {
                    time:'2018-07-31 13:22',
                    rounds:1,
                    quantity:5.32,
                    ITquantity:32332,
                    status:'ETH转账进行中'
                },
                {
                    time:'2018-07-31 13:22',
                    rounds:1,
                    quantity:5.32,
                    ITquantity:32332,
                    status:'ETH转账进行中'
                },
                {
                    time:'2018-07-31 13:22',
                    rounds:1,
                    quantity:5.32,
                    ITquantity:32332,
                    status:'ETH转账进行中'
                },
                {
                    time:'2018-07-31 13:22',
                    rounds:1,
                    quantity:5.32,
                    ITquantity:32332,
                    status:'ETH转账进行中'
                },
                {
                    time:'2018-07-31 13:22',
                    rounds:1,
                    quantity:5.32,
                    ITquantity:32332,
                    status:'ETH转账进行中'
                },
                {
                    time:'2018-07-31 13:22',
                    rounds:1,
                    quantity:5.32,
                    ITquantity:32332,
                    status:'ETH转账进行中'
                },
                {
                    time:'2018-07-31 13:22',
                    rounds:1,
                    quantity:5.32,
                    ITquantity:32332,
                    status:'ETH转账进行中'
                },
                {
                    time:'2018-07-31 13:22',
                    rounds:1,
                    quantity:5.32,
                    ITquantity:32332,
                    status:'ETH转账进行中'
                },
                {
                    time:'2018-07-31 13:22',
                    rounds:1,
                    quantity:5.32,
                    ITquantity:32332,
                    status:'ETH转账进行中'
                },
                {
                    time:'2018-07-31 13:22',
                    rounds:1,
                    quantity:5.32,
                    ITquantity:32332,
                    status:'ETH转账进行中'
                }
            ],
            records:[]
        }
    },
    mounted(){
        this.Lang=this.lang['subscription']
    }
}
</script>

<style lang="less" scoped>
     .ac-record{
        width:100%;
        text-align:center;
        padding-top:130px;
        padding-bottom:2px;
        background-image: linear-gradient(-180deg, #304599 2%, #0E1740 100%);
        .container{
            position: relative;
            width:1200px;
            height:750px;
            margin:0 auto 80px auto;
            border-radius: 20px;
            background:#fff;
            color:#fff;
            font-family: 'NotoSansCJKsc-Regula';
            .ball1{
                width:525px;
                height:525px;
                position: absolute;
                top:-40px;
                right:-235px;
                background:url('./images/bg/1.png') no-repeat 50% 50%;
            }
            .ball2{
                width:154px;
                height:157px;
                position: absolute;
                top:300px;
                left:-110px;
                background:url('./images/bg/2.png') no-repeat 50% 50%;
            }
            .ball3{
                width:335px;
                height:78px;
                position: absolute;
                bottom:-82px;
                right:-150px;
                background:url('./images/bg/3.png') no-repeat;
            }
            .inner{
                 position: relative;
                 border-radius: 20px;
                 background:#fff;
                 height:100%;
                 .banner-title{
                    display:flex;
                    justify-content: center;
                    align-items: center;
                    height:64px;
                    width:100%;
                    color:#333;
                    border-bottom:1px solid #d8d8d8;
                    font-size:16px;
                }
                .close{
                    position: absolute;
                    right:24px;
                    top:24px;
                    cursor: pointer;
                }
                .list{
                    width:100%;
                    ul {
                        position: relative;
                        width:820px;
                        height:607px;
                        margin:40px auto;
                        border-radius: 10px;
                        border:1px solid #375396;
                        li{
                            height:48px;
                            color:#333;
                            border-bottom:1px solid #c5d3f4;
                            width:780px;
                            margin:0 20px;
                            &:first-child{
                            height:60px;
                            border-radius: 8px 8px 0 0;
                            background:#375396;
                            width:100%;
                            margin:0;
                            color:#fff;
                            dl{
                                dd:not(:last-child){
                                    border-right:1px solid #5677c6;
                                }
                            }
                            }
                            dl{
                                height:100%;
                                display:flex;
                                flex-flow:row nowrap;
                                align-items: center;
                                justify-content: center;
                                dd{
                                    line-height:100%;
                                    height:27px;
                                    display:flex;
                                    justify-content: center;
                                    align-items: center;
                                    &:last-child{border:none}
                                    &:nth-child(1){width:156px}
                                    &:nth-child(2){width:130px}
                                    &:nth-child(3){width:200px}
                                    &:nth-child(4){width:149px}
                                    &:nth-child(5){width:142px}
                                }
                            }
                        }
                        
                    }
                    .pagination{
                        color:#375396;
                        margin-top:-78px;
                        span{
                            width:100px;
                            display: inline-block;
                        }
                        a{
                            color:#7e8eb5;
                        }
                        em{
                            display:inline-block;
                            border-bottom:1px solid #bcc2d2;
                            width:32px;
                            line-height:20px;
                        }
                    }
                    .no-record{
                    margin-top:-380px;
                    em{
                        color:#999;
                        font-size:14px;
                        display:block;
                        height:42px;
                    }
                    a{
                        color:#375396;
                        font-size:16px;
                        text-decoration: underline;
                    }
                    }
                }
            }
            
        }
     }
</style>
